import React, { useEffect, useState, useRef } from 'react'
import { PageHeader, Steps, Button, Form, Input, Select, message, notification } from 'antd';
import style from './News.module.css'
import axios from 'axios';
import NewsEditor from '../../components/news-manage/NewsEditor';
import { useMatch, useNavigate } from 'react-router-dom';
const { Option } = Select

export default function NewsUpdate() {
    const match = useMatch(`/news-manage/update/:id`)
    const navigate = useNavigate()

    const [current, setcurrent] = useState(0)
    const [categoryList, setcategoryList] = useState([])
    const [fromInfo, setFromInfo] = useState({})
    const [content, setContent] = useState('')
    const description = 'This is a description.';



    // const User = JSON.parse(localStorage.getItem('token'))



    const handleNext = () => {
        if (current === 0) {
            NewsForm.current.validateFields().then(res => {
                // console.log(res);
                setFromInfo(res)
                setcurrent(current + 1)
            }).catch(error => {
                console.log(error);
            })
        } else {
            if (content === '' || content.trim() === '<p></p>') {
                message.error('新闻内容不能为空')
            } else {
                setcurrent(current + 1)
            }

        }
    }

    const handlePrevious = () => {
        setcurrent(current - 1)
    }

    const NewsForm = useRef(null)


    useEffect(() => {
        axios.get('/categories').then(res => {
            // console.log(res.data);
            setcategoryList(res.data)
        })
    }, [])

    useEffect(() => {
        console.log(match.params.id);
        axios.get(`/news/${match.params.id}?_expand=category&_expand=role`).then(res => {
            let { title, categoryId ,content} = res.data
            NewsForm.current.setFieldsValue({
                title,
                categoryId
            })
            setContent(content)
        })
    }, [match.params.id])


    const handleSave = (auditState) => {
        axios.patch(`/news/${match.params.id}`, {
            ...fromInfo,
            "content": content,
            "auditState": auditState,
        }).then(res => {
            navigate(auditState === 0 ? '/news-manage/draft' : '/audit-manage/list')

            notification.info({
                message: `通知`,
                description:
                    `您可以到${auditState === 0 ? '草稿箱' : '审核列表'}中查看您的新闻`,
                placement: "bottomRight"
            });
        })
    }

    return (
        <div>
            <PageHeader
                className="site-page-header"
                title="更新新闻"
                onBack={() => match.goBack()}
                subTitle="This is a subtitle"
            />

            <Steps
                current={current}
                items={[
                    {
                        title: '基本信息',
                        description: "新闻标题,新闻分类"
                    },
                    {
                        title: '新闻内容',
                        description: '新闻主体内容',

                    },
                    {
                        title: '新闻提交',
                        description: '保存草稿或者提交审核',
                    },
                ]}
            />
            <div style={{ marginTop: '50px' }}>
                <Form
                    ref={NewsForm}
                    name="basic"
                    labelCol={{ span: 4 }}
                    wrapperCol={{ span: 20 }}
                    initialValues={{ remember: true }}
                    autoComplete="off"
                >
                    <Form.Item
                        label="新闻标题"
                        name="title"
                        rules={[{ required: true, message: 'Please input your username!' }]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="新闻分类"
                        name="categoryId"
                        rules={[{ required: true, message: 'Please input your username!' }]}
                    >
                        <Select>
                            {
                                categoryList.map(item =>
                                    <Option value={item.id} key={item.id}>{item.title}</Option>)
                            }
                        </Select>
                    </Form.Item>
                </Form>
            </div>

            <div className={current === 0 ? '' : style.active}>
            </div>
            <div className={current === 1 ? '' : style.active}>
                <NewsEditor getContent={(value) => {
                    //富文本编辑器的内容
                    // console.log(value);
                    setContent(value)
                }} content={content}></NewsEditor>
            </div>
            <div className={current === 2 ? '' : style.active}>333</div>






            <div style={{ marginTop: '50px' }}>

                {
                    current === 2 && <span>
                        <Button type='primary' onClick={() => handleSave(0)}>保存草稿箱</Button>
                        <Button type='danger' onClick={() => handleSave(1)}>提交审核</Button>
                    </span>
                }
                {
                    current < 2 && <Button type='primary' onClick={handleNext}>下一步</Button>
                }
                {
                    current > 0 && <Button onClick={handlePrevious}>上一步</Button>
                }
            </div>
        </div>
    )
}
